<template>
  <main class="w-screen h-screen bg-cyan-800 text-white px-6">
    <header class="text-center py-4 text-xl select-none">参数设置</header>
    <el-form :model="info">
      <el-form-item>
        <el-select class="w-full" placeholder="请选择摄像头" v-model="info.deviceId" clearable filterable>
          <el-option v-for="camera in cameras" :label="camera.label" :key="camera.deviceId"
                     :value="camera.deviceId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入边框大小" v-model="info.borderSize">
          <template #prepend>px</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请选择边框颜色" v-model="info.borderColor">
          <template #prepend>#</template>
        </el-input>
      </el-form-item>
      <div class="flex justify-center mt-10 select-none">
        <el-button class="text-white" @click="handleCancel">取消</el-button>
        <el-button class="text-white" @click="handleSave">保存</el-button>
      </div>
    </el-form>

  </main>
</template>

<script setup lang="ts">

import {settingInfo, showSettingView} from "../store";
import {onBeforeMount, reactive} from "vue";

const info = reactive({
  deviceId: '',
  borderSize: 10,
  borderColor: ''
})

const devices = await navigator.mediaDevices.enumerateDevices()
const cameras = devices.filter((d) => d.kind.includes('video'))

onBeforeMount(() => {
  info.deviceId = settingInfo.deviceId
  if (!info.deviceId) {
    info.deviceId = cameras[0]?.deviceId || ''
  }
  info.borderSize = settingInfo.borderSize
  info.borderColor = settingInfo.borderColor
})

const handleCancel = () :void => {
  showSettingView.value = false
}

const handleSave = (): void => {
  if (info.deviceId) {
    settingInfo.deviceId = info.deviceId
  }
  if (info.borderSize) {
    settingInfo.borderSize = info.borderSize
  }
  if (info.borderColor) {
    settingInfo.borderColor = info.borderColor
  }
  showSettingView.value = false
}

</script>

<style scoped>

</style>
